import React,{Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    StatusBar,
    Image,
    TouchableWithoutFeedback,
    AsyncStorage,
} from 'react-native';
import Header from '../header/Header';
import Gallery from 'react-native-image-gallery';
import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';

export default class PersonalTab extends Component{
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            token: '',
        };
    }

    render(){
        let barHeight = StatusBar.currentHeight;
        return (
            <View style={{
                flex: 1,
                // paddingTop: barHeight, 
                backgroundColor: '#fff'
            }}>
                <Header isShowBack={false} title='私人订制' color='#fff' bgColor='#1970e8' border='none' />
				<View style={{marginBottom: 15}}>
					<Image style={{
                        width: '100%',
                        height: 200
                    }} source={require('../../images/peo-bg.png')}/>
                    <View style={styles.posBox}>
						<Image style={{
	                        width: '100%',
	                        height: 180
	                    }} source={require('../../images/peo-img.jpg')}/>
                    </View>
				</View>
				<View>
					<ScrollView
						horizontal={true}
	                    showsHorizontalScrollIndicator={false}
					>
						<View style={styles.scrollBox}>
							<View style={styles.scrollBoxTop}>
								<Text style={styles.scrollBoxTopText}>1</Text>
							</View>
							<View style={styles.scrollBoxCenter}></View>
							<Text style={styles.scrollBoxBottom}>上传脚部模型</Text>
						</View>
						<View style={styles.scrollBox}>
							<View style={styles.scrollBoxTop}>
								<Text style={styles.scrollBoxTopText}>2</Text>
							</View>
							<View style={styles.scrollBoxCenter}></View>
							<Text style={styles.scrollBoxBottom}>选择定制元素</Text>
						</View>
						<View style={[styles.scrollBox, {marginRight: 12}]}>
							<View style={styles.scrollBoxTop}>
								<Text style={styles.scrollBoxTopText}>3</Text>
							</View>
							<View style={styles.scrollBoxCenter}></View>
							<Text style={styles.scrollBoxBottom}>生成模型下单</Text>
						</View>
					</ScrollView>
				</View>  
				<View style={styles.doNow}>
					<Text style={styles.scrollBoxBottom}>{this.state.token}</Text>
					<TouchableWithoutFeedback onPress={()=>{this.props.navigate('MyModel')}}>
						<View style={styles.doNowView}>
							<Text style={styles.scrollBoxBottom}>马上定制</Text>
						</View>
					</TouchableWithoutFeedback>
				</View>      
            </View>
        );
    }
}

const styles = StyleSheet.create({
    posBox: {paddingLeft: 12, paddingRight: 12, position: 'absolute', left: 0, right: 0, top: 20,},
	scrollBox: {paddingLeft: 6, paddingRight: 6, marginLeft: 12, width: 140, height: 36, borderRadius: 20, borderWidth: 1, borderColor: '#000000', flexDirection: 'row', alignItems: 'center'},
	scrollBoxTop: {width: 24, height: 24, backgroundColor: '#000000', borderRadius: 100, justifyContent: 'center', alignItems: 'center'},
	scrollBoxTopText: {color: '#e8e4e4', fontSize: 12},
	scrollBoxCenter: {width: 1, height: 24, backgroundColor: '#000000', marginLeft: 4, marginRight: 4},
	scrollBoxBottom: {color: '#000000', fontSize: 14},
	doNow: {flex: 1, justifyContent: 'center', alignItems: 'center'},
	doNowView: {width: 100, height: 100, borderRadius: 100, borderWidth: 1, borderColor: '#000', justifyContent: 'center', alignItems: 'center'},
})